<template>
	<u-tabbar v-model="active" :list="tabList" :mid-button="false" :active-color="activeColor"
		:inactive-color="inactiveColor" :hide-tab-bar="true" @change="change"></u-tabbar>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				activeColor: "#007aff",
				inactiveColor: "#999999",
				current: 0
			};
		},
		
		computed: {
			...mapState(["name", "tabList", "user", "unread_num", "tabarIndex"]),
			active: {
				get() {
					return uni.getStorageSync('tabIndex') > 0 ? uni.getStorageSync('tabIndex') : 0
				},
				set() {},
			}
		},
		methods: {
			...mapMutations(["changeTabar", "chageUserPageType","setTabList"]),
			navi(name) {
				if (!this._.isNil(name)) {
					this.$navi({
						route: {
							name,
						},
						isTab: true,
					});

				}
			},
			change(e) {
				this.changeTabar(e)
				uni.setStorageSync('tabIndex', e)
				if(uni.getStorageSync('bindevice') == 1){
					if (e === 2) {
						this.chageUserPageType('action')
						uni.setStorageSync("userpage", 'action')
						uni.setStorageSync('caseid', 0)
					}
				}else{
					if (e === 1) {
						this.chageUserPageType('action')
						uni.setStorageSync("userpage", 'action')
						uni.setStorageSync('caseid', 0)
					}
				}
				
				this.current = e
				this.navi(this.tabList[e].name)
			},
		},
	};
</script>

<style lang="scss" scoped>
	/deep/ .u-border-top:after {
		border-top-width: 0px !important;
	}

	/deep/ .u-tabbar__content {
		box-shadow: 0px -3px 6px 1px rgba(0, 0, 0, 0.05);
	}
</style>